<template>
    <div class="graph-index content">
        <div class="content-header text-center">
            <div class="pull-left"  style="width:16.6%;">
                <a  class="f-r"  @click="addProject()"><Icon type="md-add"/>新增分组</a>
            </div>
            <RadioGroup v-model="showType" type="button" size="large"  @on-change="choice" class="close-group">
                <Radio label="卡片式" :value="1" :disabled="batchFlag"></Radio>
                <Radio label="列表式" :value="2" :disabled="batchFlag"></Radio>
            </RadioGroup>
            <div class="pull-right">
                <Input placeholder="元件名称" class="search-input m-r-20" prefix="ios-search" v-model="search.params.graphName" @keyup.enter.native="searchGroupList"/>
                <a  class="m-r-10" @click="addGraph"><Icon type="md-add" />新增元件</a>
                <a @click="showBatchOperation">
                    批量操作
                </a>
                <!-- <Dropdown class="Tablist" @on-click="operation">
                    <a @click="showBatchOperation">
                        批量操作
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem>私密性设置</DropdownItem>
                        <DropdownItem name="group">分组</DropdownItem>
                        <DropdownItem>导出</DropdownItem>
                        <DropdownItem name="delAll">删除</DropdownItem>
                    </DropdownMenu>
                </Dropdown> -->
            </div>
        </div>

        <Row>
            <!-- 左侧分组信息 -->
            <Col span="4" class="graph-100">
                <div class="graph-group">
                    <!-- <Select  v-model="pager.params.itemId" class="width-md pull-left m-r-10" @on-change="searchGroup" clearable>
                        <Option :value="item.id" v-for="(item,index) in groupType" :key="index" >{{item.itemName}}</Option>
                    </Select> -->
                    <div class="group-serach">
                        <Input placeholder="分组名称" class="" prefix="ios-search" @keyup.enter.native="searchGroup" v-model="search.params.projectName"/>
                    </div>
                    <div class="group-cnt m-t-10 m-l-5">
                        <div class="group-info" v-for="(item,index) in groupList " :key="index"  :class="{'b-color':index==checkIndex}">
                            <div   class="info" @click="queryListByProIdClick(item.projectId,index)">{{item.projectName}}</div>
                            <div class="group-menu">
                                <i class="fa fa-edit" @click="addProject(item)" title="编辑"></i>
                                <i class="fa fa-trash-o" @click="deletePro(item)" title="删除"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </Col>
            <!-- 中间列表 -->
            <Col span="20" class="graph-card-box">
                <div class="graph-card" id="graph-card" v-if="cardShow"  >
                    <graph-card v-for="(graph, index) in graphList" :key="index" :graph="graph" @editGraph="editGraph"
                    :batchFlag="batchFlag" :checklist="batchGraphIdList" @getBatchGraphId="getBatchGraphId"  @queryListByProId="queryListByProId"></graph-card>
                    <div v-for="i in 4" :key="i+'full'"  class="graph-card-wrapper"  >
                        <div style="width:248px;height:0;    display: inline-block;"></div>
                    </div>
                    <!-- <div class="page graphPage" :v-if="page.total > 0">
                        <Page :total="page.total" :page-size="page.pageSize" :current="page.current"  simple @on-change="pageNumChange"	@on-page-size-change="sizePage"/>
                    </div> -->
                </div>
                <div class="graph-list" v-else >
                    <graph-table :graphList="graphList" @getBatchGraphIdFromTable="getBatchGraphIdFromTable" :batchFlag="batchFlag"
                    @queryListByProId="queryListByProId" :checklist="batchGraphIdList" :tableAllSelected="tableAllSelected"></graph-table>
                </div>
                <Row class="bottomBatchOperationBox" v-if="batchFlag">
                    <Button type="primary" @click="selectedAll" :loading="btnLoading">全选</Button>
                    <Button type="primary" @click="batchAccess" :loading="btnLoading" :disabled="batchGraphIdList.length==0">私密性设置</Button>
                    <Button type="primary" @click="batchGroup" :loading="btnLoading" :disabled="batchGraphIdList.length==0">分组</Button>
                    <Button type="primary" @click="batchExport" :loading="btnLoading" :disabled="batchGraphIdList.length==0">导出</Button>
                    <Button type="primary" @click="batchDelete" :loading="btnLoading" :disabled="batchGraphIdList.length==0">删除</Button>
                    <Button type="primary" @click="cancel" :loading="btnLoading">取消</Button>
                </Row>
            </Col>
            <div class="page" v-if="page.total > 0 && page.total > page.pageSize">
                <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum" :page-size-opts="opts"
                @on-change="pageNumChange" size="small" show-elevator show-sizer></Page>
            </div>
        </Row>
        <add-project ref="addProject" @refresh="refresh"></add-project>
        <graph-group ref="graphGroup"  @refreshGraphList="refreshGraphList"></graph-group>
        <graph-access ref="graphAccess"  @refreshGraphList="refreshGraphList"></graph-access>
        <fullmodal v-model="graphDetailInfo.state">
            <div class="title">
                <div class="f-l">{{graphDetailInfo.info.graphName}}</div>
                <div class="f-r">{{graphDetailInfo.info.createTime |time}}</div>
            </div>
            <div class="graph-details">
                <graph-detail :args="graphDetailInfo.info"></graph-detail>
            </div>
        </fullmodal>
    </div>
</template>
<script>

import getData from 'getData'
import util from 'util'
import AddProject from "./childGraph/add-project";
import graphGroup from './childGraph/graph-group';
import graphCard from './childGraph/graph-card';
import graphTable from './childGraph/graph-table';
import graphAccess from './childGraph/graph-access';
import graphDetail from './childGraph/graph-detail'

import fullmodal from '@/components/common/fullmodal'
export default {
    components:{fullmodal,AddProject,graphGroup,graphCard,graphTable,graphAccess},
    data(){
        return {
            tableAllSelected:false,//列表式全选
            cardAllSelected:false,//卡片式全选
            batchFlag:false,//是否展示批量按钮
            batchGraphIdList:[],//批量操作存储graphId
            page:{ //分页数据
                pageSize: 30,
                pageNum: 1,
                params:{
                },
                total:0,
            },
            opts:[30,60,120],
            graphDetailInfo:{
                state:false,
                info:{
                }
            },
            btnLoading: false,
            showType:'卡片式',
            groupList:[],
            projects:{
                projectId: null,
                projectName: ''
            },
            graphList:[],
            choseProId:null,
            cardShow: true,
            tableShow: false,
            search:{
                params:{
                },
            },
            checkIndex:null,
            idParams:{data:[]}
        }
    },
    methods:{
        init(){
            this.getGroupInfo();
        },
        selectedAll(){
            if(this.cardShow){
                if(this.batchGraphIdList.length==this.graphList.length){
                    this.cardAllSelected=false
                }else{
                    this.cardAllSelected=true
                }
                this.batchGraphIdList=this.cardAllSelected ? util.util.cloneObj(this.graphList) : []
            }else{
                this.tableAllSelected=!this.tableAllSelected
            }
        },
        batchAccess(){
            this.$refs.graphAccess.show(this.choseProId,this.batchGraphIdList);
        },
        batchGroup(){
            this.$refs.graphGroup.show(this.choseProId,this.batchGraphIdList);
        },
        batchExport(){
            for(var i=0;i<this.batchGraphIdList.length;i++){
                this.exportPic(this.batchGraphIdList[i])
            }
        },
          //导出图片
        exportPic(graph) {//下载图片地址和图片名
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = graph.graphName; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = graph.graphUrl;
        },
        cancel(){
            this.showBatchOperation()
        },
        sizePage(size){
            this.page.pageSize=size;
        },
        getBatchGraphId(type,graph){
            if(type){
                this.batchGraphIdList.push(graph)
            }else{
                this.batchGraphIdList.splice( util.util.getArrayIndexByOptions(this.batchGraphIdList,graph,['graphId']), 1 );
            }
        },
        getBatchGraphIdFromTable(graphList){
            this.batchGraphIdList = graphList
        },
        showBatchOperation(){
            this.batchFlag=!this.batchFlag
            this.batchGraphIdList=[]
        },

        addGraph(){
            this.$router.push({
                path:'/graph/add'
            })
        },
        showDetails(item){
            this.graphDetailInfo.info= item;
            this.graphDetailInfo.state=true;
        },
        getGroupInfo(){
            //获取分组数据
            getData.get('projectTree').then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.groupList = res.data.data;
                    this.queryListByProIdClick(this.groupList[0].projectId,0)
                } else {
                    this.$Message.error('获取分组数据失败！');
                }
            });
        },
        refresh(){
            this.getGroupInfo();
        },
        refreshGraphList(projectId)  {
            this.queryListByProId(projectId);
            this.showBatchOperation()
        },
        //根据分组名称查询
        searchGroup(){
            getData.post('queryListByName',this.search).then(res => {
              if (res.status == 200 && res.data.code == '000') {
                    this.groupList = res.data.data;
                } else {
                    this.$Message.error('查询获取分组数据失败！');
                }
             });
        },
        //根据元件名称查询
        searchGroupList(){
            if(this.choseProId != null){
               this.search.params.projectId = this.choseProId;
                getData.post('queryListByPIdandGName',this.search).then(res => {
                    if (res.status == 200 && res.data.code == '000') {
                            this.graphList = res.data.data;
                            if(this.cardShow == true){
                                this.tableShow = false
                            }else{
                                this.cardShow == false
                            }
                        } else {
                            this.$Message.warning('查询失败: ' + res.data.errorMsg);
                        }
                });
            }
        },
        choice(){
            if(this.showType == "卡片式"){
               this.tableShow = false;
               this.cardShow = true;
            }else{
               this.tableShow = true;
               this.cardShow = false;
            }
        },
        addProject(project) {
             this.$refs.addProject.show(project);
        },
        //属性编辑
        editGraph(graph){
            this.$router.push({
                path:'/graph',
                query:{
                    // id:graph.graphId,
                }
            });
        },
        //点击删除按钮，显示删除弹窗
        deletePro: function(params) {
            var that = this
            that.$Modal.confirm({
            content: "是否删除该分组?",
            onOk: function() {
                that.deleteProject(params);
            },
            okText:"是",
            cancelText:"否"
            });
        },
        deleteProject(projects){
             getData.get('deleteProject',{}, projects.projectId).then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.$Message.success('删除成功！');
                    this.refresh();
                } else if (res.status == 200) {
                    this.$Message.warning('删除失败: ' + res.data.errorMsg);
                }
             });
        },
       queryListByProIdClick(projectId,index){
            this.checkIndex=index;
            this.queryListByProId(projectId);
       },
        //点击组名查询项目
        queryListByProId(projectId){
            var that = this;
            that.page.params.projectId = projectId
            getData.post('queryListByProId',that.page).then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    that.graphList = res.data.data
                    that.page.total = res.data.total
                    that.choseProId = projectId
                    if(that.cardShow == true){
                        that.tableShow = false
                    }else{
                        that.cardShow == false
                    }
                } else if (res.status == 200) {
                    that.$Message.warning('查询失败: ' + res.data.errorMsg);
                }
            });
        },
        //批量操作按钮
        // operation(name){
        //     if(this.choseProId == null){//没有选取分组
        //         this.$Message.warning("请先选择对应分组")
        //     }else{
        //         //批量分组
        //         if(name == 'group'){
        //             this.$refs.graphGroup.show(this.choseProId);
        //         }else if(name == 'delAll'){//批量删除
        //             this.delAll(this.choseProId);
        //         }
        //     }
        // },
        //批量删除，显示删除弹窗
        batchDelete: function() {
            var that = this
            that.$Modal.confirm({
            content: "确定删除这些元件?",
            onOk: function() {
                that.deleteGraphAll();
            },
            okText:"是",
            cancelText:"否"
            });
        },
        deleteGraphAll(){
            this.idParams.data = this.batchGraphIdList
            getData.post('deleteGraphAll',this.idParams).then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.$Message.success('删除成功！');
                    this.refreshGraphList(this.choseProId)
                } else if (res.status == 200) {
                    this.$Message.warning('删除失败: ' + res.data.errorMsg);
                }
             });
        },
        pageNumChange(pageNum) {
            this.page.pageNum = pageNum;
            this.queryListByProId(this.choseProId);
        },
    },
    mounted () {
        this.init();
    },

    beforeRouteLeave (to, from, next) {
        this.$destroy();
        next();
    }
}
</script>
<style lang="less">
.clearfix::after{
    content: "\20";
    clear: both;
    height: 0;
    display: block;
    overflow: hidden;
}
//页面卡片视图
.graph-index{
    .graph-card:hover{
        .ivu-page{
            .ivu-page-prev ,.ivu-page-next{
                display: inline;
            }
        }
    }
    .ivu-page{
        padding-top: 8px;
    }
    .bottomBatchOperationBox{
        background-color: #d8d8d8;
        position: fixed;
        text-align: center;
        bottom: 0;
        width: calc(~ '100% - 216px');
        left: 0;
        opacity: 0.9;
        margin-left: 216px;
    }
    .graph-card-box{
        overflow: auto;
        height: calc(~ '100vh - 185px');
        //620
        // @media  only screen and (min-width: 1180px){
        //     .graph-card{
        //         width: 560px;
        //     }
        // }
        // @media  only screen and (min-width: 1460px){
        //     .graph-card{
        //         width: 840px;
        //     }
        // }
        // @media  only screen and (min-width: 1740px){
        //     .graph-card{
        //         width: 1120px;
        //     }
        // }
        .graph-list {
            padding-left: 16px;
        }

        .graph-card{
            text-align:center;
            position: relative;
            margin: 0 auto;
            .ivu-card-body{
                padding: 6px 0px 10px 16px;
            }
            .stop{
                .start{
                    background:#ed8e8c;
                }
                .operation{
                    background: #ed8e8c;
                    color: #fff;
                }
                .state{
                    color: #ed8e8c;
                }
            }
            .card-item{
                background:#ffffff;
                width:240px;
                height:120px;
                float: left;
                margin: 30px 30px 15px 15px;
            }
            .start{
                background:#6cc8d7;
            }
            .title{
                overflow: hidden;
                //border-top:1px solid #d8d8d8;
            }
            .cardicon{
                width:40px;
                height:40px;
                border-radius:100px;
                position: relative;
                float: left;
                margin: 15px 0 15px 10px;
                i{
                    font-size: 22px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            .card-info{
                margin: 5px 10 0 10px;
                .info-desc{
                    color: #a3a3a3;
                }
            }
            .operation{
                color: #777777;
                font-size: 16px;
                .crow >div{
                    cursor: pointer;
                    text-align: center;
                }
            }
        }
    }
}

//左侧分组信息
.graph-group{
    padding: 5px;
    height: calc(~ '100vh - 150px');
    border:1px solid #d1d1d1;
    background: #fff;
    .b-color{ background-color:#e5e5e5;}
    .group-info{
        cursor: pointer;
        overflow: hidden;
        padding-left: 5px;
        >div{
            float: left;
            height: 25px;
            line-height: 25px;
        }
        .info{
            width: 80%;
        }
        .group-menu{
            display: none;
            width: 20%;
            text-align: center;
            i{
                padding-right: 5px;
            }
        }
    }
    .group-info:hover{
        .group-menu{
            display: block;
        }
    }
}
//详情展示  点击图像展示实际数据图表
.full-cnt{
    .title{
        overflow: hidden;
        color: #3a3a3a;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
    }
    .graph-details{
        background: #fff;
    }
}
</style>



